<template>
    <div>

        <el-dialog :visible.sync="editDialogVisible"  title="客户详细信息">
            <el-form :model="refund"  ref="refundForm" label-width="100px" style="width: 500px; margin-left: 180px" size="small "
            >
                <el-form-item label="客户账号：" prop="cusAccount" style="">
                    <el-input v-model="refund.cusAccount" :disabled="true" />
                </el-form-item>
                <el-form-item label="密   码：" prop="cusPwd">
                    <el-input v-model="refund.cusPwd" :disabled="true"  />
                </el-form-item>
                <el-form-item label="姓   名：" prop="cusName">
                    <el-input v-model="refund.cusName" :disabled="true" />
                </el-form-item>
                <el-form-item label="身份证号：" prop="cusId">
                    <el-input v-model="refund.cusId" :disabled="true"/>
                </el-form-item>
                <el-form-item label="电话号码：" prop="cusTelNumber">
                    <el-input v-model="refund.cusTelNumber" :disabled="true"/>
                </el-form-item>
                <el-form-item label="年   龄：" prop="cusAge">
                    <el-input v-model="refund.cusAge"  :disabled="true"/>
                </el-form-item>
                <el-form-item label="性   别：" prop="cusSex">
                    <el-input  v-model="refund.cusSex" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="邮   箱：" prop="cusEmail">
                    <el-input v-model="refund.cusEmail" :disabled="true"/>
                </el-form-item>
                <el-form-item label="种   类：" prop="cusType">
                    <el-input v-model="refund.cusType" :disabled="true"/>
                </el-form-item>
                <el-form-item label="积   分：" prop="cusIntegral">
                    <el-input v-model="refund.cusIntegral" :disabled="true"/>
                </el-form-item>
                <el-form-item label="注册时间：" prop="cusTime">
                    <el-input v-model="refund.cusTime" :disabled="true"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="editDialogVisible=false">确定</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>


        <el-dialog :visible.sync="editDialogVisible1" title="订单详细信息">
            <el-form   :model="refund"  ref="refundForm" label-width="100px" style="width: 500px; margin-left: 180px" size="small "
                      >
                <el-form-item label="订单编号：" prop="cusAccount" >
                    <el-input v-model="refund.cusAccount" :disabled="true" />
                </el-form-item>
                <el-form-item label="机票编号：" prop="booNo">
                    <el-input v-model="refund.booNo" :disabled="true" />
                </el-form-item>
                <el-form-item label="账   号：" prop="booOrderNum">
                    <el-input v-model="refund.booOrderNum" :disabled="true" />
                </el-form-item>
                <el-form-item label="姓   名：" prop="cusName">
                    <el-input v-model="refund.cusName" :disabled="true"/>
                </el-form-item>
                <el-form-item label="身份证号：" prop="cusId">
                    <el-input v-model="refund.cusId" :disabled="true"/>
                </el-form-item>
                <el-form-item label="电话号码：" prop="cusTelNumber">
                    <el-input v-model="refund.cusTelNumber"  :disabled="true"/>
                </el-form-item>
                <el-form-item label="预定时间：" prop="booTime">
                    <el-input v-model="refund.booTime" :disabled="true"/>
                </el-form-item>
                <el-form-item label="预定状态：" prop="flag">
                    <el-input v-model="refund.flag" :disabled="true"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="editDialogVisible1=false">确定</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
        <el-breadcrumb separator-class="el-icon-arrow-right"
                       style="background-color:white;padding: 8px;margin-bottom: 20px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>航班机票管理</el-breadcrumb-item>
            <el-breadcrumb-item>退票审核</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="refundList"  width="100%" >
            <el-table-column prop="cusAccount"   label="客户编号" >
                <template slot-scope="scope">
                    <el-button type="text" size="medium"  @click="editReturn(scope.$index,scope.row) ">{{scope.row.cusAccount}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="booOrderNum" label="订单号" >
                <template slot-scope="scope">
                    <el-button type="text" size="medium"  @click="editReturn2(scope.$index,scope.row)">{{scope.row.booOrderNum}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="booNo" label="机票编号" ></el-table-column>
            <el-table-column prop="booTime" label="预定时间"></el-table-column>
            <el-table-column prop="booBTime" label="起飞时间"></el-table-column>
            <el-table-column label="审核操作">

                <template slot-scope="scope">
                    <el-button size="mini" @click="deleteRefund(scope.$index,scope.row)">通过</el-button>
                </template>

            </el-table-column>
        </el-table>
        <el-pagination
                style="margin-top: 10px"
                background
                layout="prev, pager, next"
                :current-page.sync="pageInfo.pageNum"
                :page-count="pageInfo.pages"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="this.findList"
        >
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "Refund",
        created() {
            this.findList();
        },
        methods: {
            /**
             * 获取表格内数据
             */
            transformation() {
                // 使用this.$options.filters[]方式获取本地过滤器
                let temp = this.$options.filters['filterA'];

                temp('refund.cusSex'); // 对size进行数据过滤
            },




            findList() {
                axios.post("/bookInformation/page", {
                    pageNum:this.pageInfo.pageNum,
                    pageSize:this.pageInfo.pageSize,
                    condition:{}
                }).then(resp => {
                    // console.log(resp.data);
                    this.pageInfo.pageSize=resp.data.pageSize;
                    this.pageInfo.pageNum=resp.data.pageNum;
                    this.pageInfo.total=resp.data.total;
                    this.pageInfo.pages=resp.data.pages;
                    this.refundList=resp.data.list;
                })
            },
            editReturn(index, row) {
                //弹出一个可以修改输入用户信息的表单窗口
                this.vaAccout=row.cusAccount;
                this.editDialogVisible = true;
                //克隆row
                let clone = _.clone(row);
                this.refund = clone;
            },
            editReturn2(index, row) {
                //弹出一个可以修改输入用户信息的表单窗口
                this.vaAccout=row.cusAccount;
                this.editDialogVisible1 = true;
                //克隆row
                let clone = _.clone(row);
                this.refund = clone;
            },
            deleteRefund(index, row) {
                this.$confirm('通过退票操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/bookInformation/delete/" + row.id).then(resp => {
                        if (resp.data === "success") {
                            this.$message({
                                type: 'success',
                                message: '退票成功!',
                            });
                            this.findList()
                        } else {
                            this.$message({
                                type: 'error',
                                message: 'this.findList();退票失败!'
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        data() {

            return {
                //pageInfo对象实际是从后台查询得到的，代表了分页必要的信息
                pageInfo:{
                    pageNum:1, /*当前是那一页*/
                    pageSize:5, /*每页展示多少条*/
                    pages:20, /*总共有多少页*/
                    total:100 /*总共有多少条数据*/
                },

                vaAccout:"",/*记录原来*/
                editDialogVisible: false,
                editDialogVisible1: false,
                refund: {},
                btnSts: false,
                refundList: [],







            }
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>